<!--系统管理 --- 组织机构 --- 部门管理 -->
<template>
  <div class="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
      </div>
      <!-- <el-tree
        ref="tree"
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        node-key="fCompanyid"
        :highlight-current="highlightBd"
        :accordion="true"
        :expand-on-click-node="false"
        :default-expanded-keys="expandedKeys"
                ></el-tree> -->
      <tree :treeData="treeData" :checkData="checkData" name="SysManageManage_treeCheck" nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick" :defaultProps="defaultProps">
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <div class="department_right_name">
        <div>{{ showName }}--部门信息</div>
      </div>
      <!-- 顶部导航栏 -->
      <div class="mechanism_nav">
        <!-- 左侧 -->
        <div class="mechanism_nav_left"></div>
        <!-- 顶部按钮 -->
        <div class="print">
          <div class="printTable">
            <!--  -->
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getDataList(companyId)"></el-button>
            <el-button type="primary" v-if="lr_add" icon="el-icon-circle-plus-outline" size="small"
              @click="newDetail(treeCompanyid)">
              新增</el-button>
            <el-button type="primary" v-if="lr_edit" icon="el-icon-edit" size="small"
              @click="editText(fDepartmentid)">编辑</el-button>
            <el-button type="primary" v-if="lr_delete" icon="el-icon-delete" size="small"
              @click="rowDelete(fDepartmentid)">删除
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格 -->
      <div class="text_table">
        <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)"
          @row-click="getRowInfo" :data="tableData" style="width: 100%" height="calc(100% - 20px)" stripe border
          highlight-current-row @current-change="rowChange">
          <el-table-column fixed type="index" width="50" align="center">
          </el-table-column>
          <el-table-column prop="fFullname" label="部门名称" width="200">
            <!-- 超出鼠标滑过显示 -->
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fFullname">{{
                  scope.row.fFullname
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fEncode" label="部门编号" width="120" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fEncode">{{
                  scope.row.fEncode
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fShortname" label="部门简称" width="200">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fShortname">{{
                  scope.row.fShortname
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fNature" label="部门性质" width="100" align="center">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fNature">{{
                  scope.row.fNature
                }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fManager" label="负责人" width="100" align="center">
          </el-table-column>
          <el-table-column prop="fPhone" label="电话号" width="110" align="center">
          </el-table-column>
          <el-table-column prop="fNote" label="备注" width="250">
            <template slot-scope="scope">
              <div class="lineBoxhidden">
                <a href="javascript:;" :title="scope.row.fNote">{{
                  scope.row.fNote
                }}</a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!--弹框 新增 -->
      <div class="Control-1">
        <el-dialog :close-on-click-modal="false" title="添加部门" v-dialogDrag :visible.sync="dialogCheckVisible"
          v-loading="loadingCheckDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: dialogHeight }">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
              <div class="tableRow">
                <el-form-item label="部门名称" prop="fFullname" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fFullname" autocomplete="off" placeholder="最多输入25个文本"></el-input>
                </el-form-item>
                <el-form-item label="部门简称" prop="fShortname" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fShortname" autocomplete="off" placeholder="最多输入25个文本"></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="部门编码" prop="fEncode" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fEncode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门性质" prop="fNature" :label-width="formLabelWidth">
                  <el-select v-model="ruleForm.fNature" placeholder="请选择">
                    <el-option v-for="(v, i) in fNatureList" :key="i" :label="v.option" :value="v.option"></el-option>
                  </el-select>
                </el-form-item>
              </div>

              <div class="tableRow">
                <el-form-item label="负责人" prop="fManager" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fManager" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="fPhone" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fPhone" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="tableRow" style="margin-top: 10px">
                <el-form-item label="备注" prop="fNote" :label-width="formLabelWidth">
                  <el-input v-model="ruleForm.fNote" type="textarea" :rows="4" placeholder="请输入内容" autocomplete="off">
                  </el-input>
                </el-form-item>
              </div>
              <el-form-item class="newlyAdded_btn">
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button type="warning" @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
      <!--弹框 编辑 -->
      <div class="Control-1">
        <el-dialog :close-on-click-modal="false" title="编辑" v-dialogDrag :visible.sync="dialogTableVisible"
          v-loading="loadingDialog" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)">
          <div class="dialogBody common" :style="{ height: dialogHeight }">
            <el-form :model="formData" :rules="rules" ref="formData">
              <div class="tableRow">
                <el-form-item label="部门名称" prop="fFullname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fFullname" autocomplete="off" placeholder="最多输入25个文本"></el-input>
                </el-form-item>
                <el-form-item label="部门简称" prop="fShortname" :label-width="formLabelWidth">
                  <el-input v-model="formData.fShortname" autocomplete="off" placeholder="最多输入25个文本"></el-input>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="部门编码" prop="fEncode" :label-width="formLabelWidth">
                  <el-input v-model="formData.fEncode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="部门性质" prop="fNature" :label-width="formLabelWidth">
                  <el-select v-model="formData.fNature" placeholder="请选择">
                    <el-option v-for="(v, i) in fNatureList" :key="i" :label="v.option" :value="v.option"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="tableRow">
                <el-form-item label="负责人" prop="fManager" :label-width="formLabelWidth">
                  <el-input v-model="formData.fManager" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" prop="fPhone" :label-width="formLabelWidth">
                  <el-input v-model="formData.fPhone" autocomplete="off"></el-input>
                </el-form-item>
              </div>
              <div class="tableRow" style="margin-top: 10px">
                <el-form-item label="备注" prop="fNote" :label-width="formLabelWidth">
                  <el-input v-model="formData.fNote" type="textarea" :rows="4" placeholder="请输入内容" autocomplete="off">
                  </el-input>
                </el-form-item>
              </div>
              <el-form-item class="newlyAdded_btn">
                <el-button type="primary" @click="submitForm2('formData')">确认修改</el-button>
                <el-button type="warning" @click="resetForm2()">关闭</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getBaseCompanyList,
  getBaseDepartmentList,
  addBaseDepartment,
  getBaseDepartmentByFid,
  delBaseDepartment,
} from "@/api/request.js";
import tree from "@/components/public/common-trees";

export default {
  inject: ["reload"],
  name: "Home",
  components: {
    tree,
  },
  data() {
    return {
      name: "department",
      lr_add: null,
      lr_edit: null,
      lr_delete: null,
      highlightBd: true,
      currentPage4: 4,
      checked: false, //查看下级
      showName: "未选择公司",
      dialogHeight: "",
      fId: null, //当前数据fId
      projectName: null, //项目名称
      loading: false,
      fDepartmentid: "", //当前行部门id
      dialogFormVisible: false,
      treeDatas: null,
      // 新增
      dialogCheckVisible: false, //弹窗的显示隐藏
      loadingCheckDialog: false,
      fNatureList: [
        { option: "综合性" },
        { option: "协调性" },
        { option: "咨询性" },
        { option: "生产性" },
        { option: "其他性" },
      ],
      ruleForm: {
        fDepartmentid: "", //部门id
        fParentid: "", //父级id
        fCompanyid: "", //公司id
        fShortname: "", //部门简称
        fFullname: "", //部门全称
        fNature: "", //部门性质
        fEncode: "", //部门编码
        fManager: "", //部门负责人
        fPhone: "", //部门联系电话
        fNote: "", //备注
      },
      rules: {
        fFullname: [
          { required: true, message: "请输入机构全称", trigger: "blur" },
          { min: 1, max: 25, message: "最多输入25个文本", trigger: "blur" },
        ],
        fShortname: [
          { required: false, message: "请输入机构简称", trigger: "blur" },
          { min: 1, max: 25, message: "最多输入25个文本", trigger: "blur" },
        ],
        fNature: [
          { required: false, message: "请选择机构性质", trigger: "change" },
        ],
        fManager: [{ required: false, message: "请选择", trigger: "blur" }],
        fPhone: [{ required: false, message: "请选择", trigger: "blur" }],
        fEncode: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      // 编辑
      loadingDialog: false,
      dialogTableVisible: false,
      formData: {
        fDepartmentid: "", //部门id
        fParentid: "", //父级id
        fCompanyid: "", //公司id
        fShortname: "", //部门简称
        fFullname: "", //部门全称
        fNature: "", //部门性质
        fEncode: "", //部门编码
        fManager: "", //部门负责人
        fPhone: "", //部门联系电话
        fNote: "", //备注
      },
      row: null,
      companyTree: "", //所有数据
      fParentName: "", //父级名称

      formLabelWidth: "70px",
      treeData: [], //左侧树
      treeCompanyid: "", //点击机构树带出id
      tableData: [], //表格数据列表
      // 左侧机构树
      checkData: [],
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      dialogVisible: false,
      companyId: null,
      treelength: false,
    };
  },
  mounted() {
    this.getHeight();
    if (JSON.parse(sessionStorage.getItem("monitorBack-SysManageManage_treeCheck"))) {
      var id = JSON.parse(sessionStorage.getItem("monitorBack-SysManageManage_treeCheck"));
      this.checkData = [id.fCompanyid];
      this.formData.fCompanyid = id.fCompanyid
    }
    this.getTree();
    this.btnRole(this.name);
  },
  // 卡卡1
  destroyed() { },
  // 卡卡1
  methods: {
    btnRole(name) {
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("monitorBack-ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });

        this.lr_add = btnStr.includes("lr_add");
        this.lr_edit = btnStr.includes("lr_edit");
        this.lr_delete = btnStr.includes("lr_delete");
      } else {
        this.lr_add = true;
        this.lr_edit = true;
        this.lr_delete = true;
      }
    },
    // 左侧树结构
    getTree() {
      getBaseCompanyList({})
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.baseCompanyList;
            this.treeData = this.commonJs.tranListToTreeData(companyTree);

            if (this.treeData[0].children == undefined) {
              this.treelength = false; //左侧组织机构是否显示
            } else {
              this.treelength = true;
            }

            let id = null;
            if (
              JSON.parse(sessionStorage.getItem("monitorBack-SysManageManage_treeCheck"))
            ) {
              let dataId = JSON.parse(
                sessionStorage.getItem("monitorBack-SysManageManage_treeCheck")
              );
              this.treeDatas = dataId;
              id = dataId.fCompanyid;
              this.showName = dataId.fShortname; //顶部显示机构名
            } else {
              id = this.treeData[0].fCompanyid;
              this.showName = this.treeData[0].fShortname; //顶部显示机构名
              this.checkData[0] = this.treeData[0].fCompanyid;

            }

            this.companyId = id;
            this.treeCompanyid = id;
            this.fDepartmentid = "";
            this.getDataList(id);
          } else {
            this.$message.error("获取组织机构失败", res.msg);
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },

    // 获取列表数据
    getDataList(id) {
      this.loading = true;
      this.fDepartmentid = "";
      getBaseDepartmentList({ fCompanyid: id })
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.loading = false;
            this.dialogCheckVisible = false;
            this.dialogTableVisible = false;
            that.tableData = res.data.baseDepartmentList;
            setTimeout(() => {
              that.$nextTick(() => {
                that.$refs.multipleTable.doLayout();
              });
            }, 200);
          } else {
            this.$message.error("列表数据", res.msg);
            this.loading = true;
            return false;
          }
        })
        .catch((error) => {
          console.log("列表数据接口报错", error);
          this.loading = true;
        });
    },
    // 新增
    newDetail(id) {
      this.ruleForm = {
        fDepartmentid: "", //部门id
        fParentid: "", //父级id
        fCompanyid: "", //公司id
        fShortname: "", //部门简称
        fFullname: "", //部门全称
        fNature: "", //部门性质
        fEncode: "", //部门编码
        fManager: "", //部门负责人
        fPhone: "", //部门联系电话
        fNote: "", //备注
      };
      if (id != "" && id != null) {
        this.dialogCheckVisible = true;
        this.ruleForm.fParentid = 0;
        this.ruleForm.fCompanyid = id;
      } else {
        this.$message.error("请先选择机构组织");
        return false;
      }
    },
    // 新增确认
    submitForm() {
      var that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.loadingCheckDialog = true;
          addBaseDepartment(that.ruleForm)
            .then((res) => {
              if (res.errcode == 0) {
                that.dialogCheckVisible = false;
                that.loadingCheckDialog = false;

                // 卡卡5
                this.getDataList(this.treeCompanyid);
                // 卡卡5
                this.$message.success("新增成功");
              } else {
                this.$message.error("新增失败", res.msg);
                this.loadingCheckDialog = false;
                return false;
              }
            })
            .catch(() => {
              console.log("新增失败");
              this.loadingCheckDialog = false;
            });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 编辑
    editText(id) {
      if (id != "") {
        this.dialogTableVisible = true;
        this.loadingDialog = true;
        getBaseDepartmentByFid({ fDepartmentid: id })
          .then((res) => {
            if (res.errcode == 0) {
              var that = this;
              that.loadingDialog = false;
              that.dialogTableVisible = true;
              that.formData = res.data.lrBaseDepartment;
            } else {
              this.$message.error("编辑", res.msg);
              this.loadingDialog = false;
            }
          })
          .catch(() => {
            console.log("详情接口报错");
            this.loadingDialog = false;
          });
      } else {
        return this.$message.error("请先选择需要编辑的部门");
      }
    },
    //  确认修改：
    submitForm2() {
      this.loadingDialog = true;
      var that = this;
      this.$refs.formData.validate((valid) => {
        if (valid) {
          addBaseDepartment(that.formData)
            .then((res) => {
              if (res.errcode == 0) {
                that.loadingDialog = false;
                that.dialogTableVisible = false;
                // 卡卡5
                this.getDataList(this.treeCompanyid);
                // 卡卡5
                this.$message.success("修改成功");
              } else {
                this.$message.error("修改失败", res.msg);
                this.loadingDialog = false;
                return false;
              }
            })
            .catch(() => {
              console.log("新增接口出错");
              this.loadingDialog = false;
            });
        } else {
          this.$message.error("请填写必填项");
          return false;
        }
      });
    },
    // 关闭
    resetForm2() {
      this.dialogTableVisible = false;
    },

    // 点击当前行
    getRowInfo(e) {
      this.row = e;
      this.fDepartmentid = e.fDepartmentid;
    },
    // 点击当前行变色
    rowChange(val) {
      this.currentRow = val;
    },

    // 获取页面容器高度
    getHeight() {
      var h = document.documentElement.clientHeight; //获取页面可见高度
      // var w = document.documentElement.clientWidth; //获取页面可见高度
      this.dialogHeight = h * 0.3 + "px";
    },
    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fShortname; //顶部显示机构名
      this.treeDatas = data;
      this.treeCompanyid = data.fCompanyid;
      this.getDataList(this.treeCompanyid);
    },
    // 删除
    rowDelete(id) {
      if (id != "") {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.loading = true;
            delBaseDepartment({ fDepartmentid: id })
              .then((res) => {
                if (res.errcode == 0) {
                  this.loading = false;
                  // 卡卡4
                  this.getDataList(this.treeCompanyid);
                  // 卡卡4
                  this.$message.success("删除成功");
                } else {
                  this.$message.error("删除失败", res.msg);
                  this.loading = false;

                  return false;
                }
              })
              .catch(() => {
                console.log("删除失败");
                this.loading = false;
              });
          })
          .catch(() => {
            this.$message("取消删除");
          });
      } else {
        return this.$message.error("请先选择需要删除的部门");
      }
    },
  },
};
</script>

<style scoped>
.printTables {
  background: #fff;
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 10px;
}

.dialogBody {
  padding: 3px 20px;
  height: 80%;
  overflow-y: auto;
}

a {
  text-decoration: none;
  color: #000;
}
</style>